
<template>
  <el-dialog :visible="showmessage" style="margin-left: 180px" :before-close="handclick" width="800px">
    <div class="chat-container">
      <div class="chat-area">
        <!-- 左侧用户留言区域 -->
        <div class="user-message">
          <div class="user-avatar">
            <img src="../../../images/head.jpg" alt="User Avatar" />
          </div>
          <div class="user-message-content">
            <div class="user-info">
              <div class="user-name">{{ messages.contactName }}</div>
              <div class="message-time">
                {{ messages.gmtCreate | dateFormat }}
              </div>
            </div>
            <div class="message-content">{{ messages.messageSubject }}</div>
          </div>
        </div>
        <!-- 右侧工作人员回复区域 -->
        <div class="staff-message" v-for="message in staffMessages" :key="message.index">
          <div class="rightbox">
            <div class="contentbox">
              <div class="message-contenttmwo">{{ message.leaveMessage }}</div>
            </div>
            <div>
              <div class="staff-info">
                <div class="staff-name">{{ adminname }}</div>
                <div class="message-time">
                  {{ message.gmtCreate | dateFormat }}
                </div>
              </div>
            </div>
          </div>
          <div class="user-beavatar">
            <img src="../../../images/head.jpg" />
          </div>
        </div>
      </div>
      <div class="halvingline"></div>
      <div class="input-area">
        <el-input v-model="input" placeholder="请输入留言内容,回复长度不能超过200字!" type="textarea" maxlength="200" :rows="3" class="inputtxt">
        </el-input>
        <el-button @click="sendMessage" class="nthone">发送</el-button>
        <el-button @click="clearInput" class="nthtwo">清空</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { addReply, getnested, getBoxMessage } from "@/api/nested";
import { getapprovallist } from "@/api/demonstrations";
export default {
  name: "ChatBox",
  props: {},
  data() {
    return {
      showmessage: false,
      messages: [],
      staffMessages: [],
      input: "",
      adminId: this.$store.state.user.userInfo.id,
      propId: "",
      adminname: this.$store.state.user.userInfo.username
    };
  },
  methods: {
    handclick() {
      this.input = "";
      this.showmessage = false;
      this.$parent.$parent.getapprovallist();
    },
    demonstrate(id) {
      this.showmessage = true;
      this.propId = id;
      this.$parent.$parent.getapprovallist();

      this.getnested(id);
      getBoxMessage({ id: id }).then((res) => {
        this.messages = res.data.data;
        // console.log(this.messages);
      });
    },
    // 回复内容
    getnested(id) {
      getnested({ id }).then((res) => {
        this.staffMessages = res.data.data;
        console.log(this.staffMessages);
      });
    },
    sendMessage() {
      if (this.input.trim().length <= 0) {
        this.$message.warning('请先输入回复信息')
      } else {
        addReply({
          adminId: this.adminId,
          leaveMessage: this.input,
          publishId: this.propId,
        }).then((res) => {
          if (res.data.state === 20000) {
            this.input = "";
            // this.showmessage = false
            this.$message.success("回复成功");
            setTimeout(() => {
              this.getnested(this.propId);
            }, 100);
          } else {
            this.$message.warning('回复失败，请稍后重试')
            this.input = ''
          }
        });
      }

    },
    clearInput() {
      this.input = "";
    },
  },
  watch: {
    staffMessages: {
      handler(newval, oldval) {
        // console.log(1,oldval);
        // console.log(2,newval);
        this.staffMessages = newval;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped>
.chat-container {
  display: flex;
  margin-left: 8px;
  flex-direction: column;
  height: 400px;
}

.chat-area {
  /* flex: 1; */
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.user-message {
  display: flex;
  margin-bottom: 10px;
}

.staff-message {
  display: flex;
  justify-content: flex-end;
  /* justify-content: center; */
  margin-bottom: 10px;
  margin-top: 20px;
  /* margin-left: 270px; */
}

.user-avatar {
  margin-right: 10px;
}

.user-avatar img {
  border-radius: 50%;
}

.user-beavatar {
  margin-right: 10px;
}

.user-beavatar img {
  border-radius: 50%;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.staff-info {
  display: flex;
  margin-right: 10px;

  justify-content: flex-end;
  margin-bottom: 5px;
}

.staff-name {
  font-weight: bold;
  margin-right: 5px;
}

.user-name {
  font-weight: bold;
  margin-right: 5px;
}

.message-content {
  background-color: #e3effd;
  padding: 10px;
  border-radius: 10px;
  max-width: 90%;
}

.message-contenttmwo {
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 10px;
  max-width: 90%;
  /* display: flex;
  justify-content: flex-end; */
}

.contentbox {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
  margin-right: 8px;
}

.input-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.nthone {
  color: #fff;
  background-color: #4877e8;
}

.nthtwo {
  color: #fff;
  background-color: #515e81;
}

.halvingline {
  width: 100%;
  margin-top: 50px;
  border: 1px solid #999999;
}

.inputtxt {
  margin-right: 40px;
}

.user-message-content {
  display: flex;
  flex-direction: column;
}

.rightbox {
  display: flex;
  flex-direction: column-reverse;
}</style>